<template>
	<view class="tcl_sh_38">
		<view class="image-top">
			<image src="/static/jxw/sh_lxby_3839/top_38.png" style="width: 750rpx" mode="widthFix"></image>
		</view>
		<view class="outer">
			<view class="form-container">
				<uni-forms class="login-form" ref="accountForm" :model="formData">
					<uni-forms-item class="input-phone">
						<inputPhone v-model="formData.mobile" sw="500rpx" placeholder="请输入办理手机号"></inputPhone>
					</uni-forms-item>

					<view class="login-btn" style="text-align: center">
						<image mode="widthFix" src="/static/jxw/sh_lxby_3839/btn.png" style="width: 600rpx" @click="confirmOrder"></image>
					</view>
					<myCheckbox :allChecked="allChecked" :radioItem="radioItem" @updateAllChecked="allChecked = $event"></myCheckbox>
				</uni-forms>
			</view>
		</view>

		<view class="image-bottom">
			<image src="/static/jxw/sh_lxby_3839/bottom_38.png" style="width: 750rpx" mode="widthFix"></image>
		</view>
		<!-- 滚动 -->
		<view class="arrive-btn" :style="{ display: showHeight > 700 ? '' : 'none' }">
			<image src="/static/jxw/sh_lxby_3839/btn.png" mode="" style="width: 600rpx; height: 110rpx" @click="toTop"></image>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref, onMounted, watchEffect, watch } from 'vue';
import { onLoad, onPageScroll, onReady } from '@dcloudio/uni-app';
import initApi from '@/apis/init.js';
import { storeToRefs } from 'pinia';
import { useCounterStore } from '@/store/counter.js';

const radioItem = ref([
	{
		id: 1,
		label: '《 活动规则》',
		key: 252430
	},
	{
		id: 2,
		label: '《 隐私条款 》',
		key: 1
	}
]);
const { formatPhone } = storeToRefs(useCounterStore());
const agreeType = ref(1);

const showHeight = ref(0);
const accountForm = ref();
const allChecked = ref(false);
const formData = reactive({
	mobile: '',
	smsCode: null,
	orderNo: null,
	channelCode: '',
	productCode: ''
});
const confirmOrder = () => {
	try {
		if (!formData.mobile) return uni.utils.toast('请输入手机号');
		if (!allChecked.value) return uni.utils.toast('请勾选《活动规则》《隐私协议》');
		return uni.utils.toast('功能开发者中 请期待。。。');
	} catch (e) {
		//TODO handle the exception
	}
};
const changeAll = (val) => {
	console.log(val.detail, val.detail.value.length);
	if (val.detail.value.length > 0) {
		allChecked.value = true;
	} else {
		allChecked.value = false;
	}
};
onPageScroll((e) => {
	showHeight.value = e.scrollTop;
});
const toTop = () => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 300
	});
};
</script>

<style lang="scss" scoped>
.arrive-btn {
	position: fixed;
	bottom: 20rpx;
	width: 750rpx;
	text-align: center;
}
.uni-forms-item {
	width: 600rpx;
	height: 100rpx;
	margin-bottom: 20 !important;
	border: 2rpx solid #eee;
	background-color: #ffffff;
	border-radius: 100rpx;
	box-sizing: border-box;
	margin: 0 auto;
}

.outer {
	background-color: #85eefd;
}

.form-container {
	width: 690rpx;
	height: 466rpx;
	background: #ffffff;
	border-radius: 48rpx;
	margin: 0 auto;
	padding-top: 20rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	justify-content: center;
}

.tcl_sh_38 {
	width: 750rpx;
	margin: 0 auto;
	height: 100%;
}

:deep(.uni-checkbox-input) {
	border-radius: 80rpx !important;
}
</style>
